<template>
  <div class="rili_product-wrapper">
    <div  class="ui menu secondary pointing" :class="field.name">
      <a href="javascript:;" @click='current_ind=ind' :class="{active:ind==current_ind}" class="item" :data-tab="'item_'+ind"
         v-for="(g,ind) in group">
         {{g.title}}
      </a>
    </div>
      <div :class="{active:0==current_ind}" class="ui bottom tab" data-tab="item_0">
        <rili_attr v-if="product_id" :product_id="product_id" :ols="ols" :group="group_attr" @addAttr="addAttr" @editAttr="editAttr" :fieldNames="fieldNames"  :attr_data="attr_data" @setAttrRili="setAttrRili" :field="field" :modelInfo="modelInfo"></rili_attr>
      </div>
      <div :class="{active:1==current_ind}" class="ui bottom attached tab" data-tab="item_1">
        <single_attr v-if="product_id" :product_id="product_id" :ols="ols" :group="group_attr" :attr_data="attr_data" @addAttr="addAttr" @editAttr="editAttr" :modelInfo="modelInfo" @setSingleInfo="setSingleInfo" :field="field"></single_attr>
      </div>

  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import rili_attr from 'components/field/rili/rili_attr'
  import single_attr from 'components/field/rili/single_attr'

  const store = util.store;
  import _ from 'lodash';
  import RP from 'src/util/common/attr_rili';

  export default {
    data() {
      return {
        val: '',
        group_attr: [
        ],
        dataAll: {},
        attr_data: {},
        data: {},
        ols: [],
        is_dates: null,
        data_single: {},
        tabRadio: null,
        outObj: null,
        current_ind: 0,
        modelInfo:{
          getAttr:'getProductAttrs',
          AttrModel:'AttrProduct',
          riliDayMid:55,
          attr_mid:52,
        },
        fieldNames: [
//          {
//          title:'成本价(¥)',
//          name:'sale_price'
//        },

          {
//            title: '库存(已售/总)',
            title: '库存',
            name: 'quantity'
          },
          {
            title:'状态',
            name:'ol',
            enum_val:[
              '不可售卖','可售卖'
            ]
          },
        ],
        group: [
          {
            val: '1',
            title: '日历模式'
          },
          {
            val: '0',
            title: '非日历模式'
          }
        ],
      }
    },
    components: {rili_attr,single_attr},
    methods: {
      setSingleInfo(info,product_id){
        this.data_single[product_id] = info;
        this.toEmit();
      },
      setAttrRili(rili,product_id){
        this.data[product_id] = rili;
        this.toEmit();
      },
      toEmit(){
        RP.toEmit(this);
      },
      getProductAttr(){
        RP.getProductAttr(this);
      },
      editAttr(g){
        RP.editAttr(this,g);
      },
      addAttr(){
        RP.addAttr(this);
      },
    },
    watch: {
      is_quantity_date(val,old){
        if(val!=old) {
          this.toEmit();
        }
      },
      is_dates(val){
        if(val) {
          this.current_ind=Number(!val[this.product_id]);
        }
      }
    },
    computed: {
      is_quantity_date(){
        return this.current_ind==0;
      },
      product_id(){
        return this.$route.query.product_id;
      },
    },
    props: ['field'],
    created() {
      this.getProductAttr();
    },
    mounted() {
    }
  };
</script>

<style scoped>
  .field {
  }
</style>
